<template>
  <!-- 用户角色 表单页面 -->
  <div v-if="crud.status.cu > 0 && !showBinding">
    <el-drawer
      :title="crud.status.title"
      :visible.sync="crud.status.cu > 0 && !showBinding"
      direction="rtl"
      :before-close="crud.cancelCU"
      :wrapper-closable="false"
      size="400px"
    >
      <div class="leisure-drawer__content">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="100px"
        >

          <el-form-item label="角色名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入角色名称" clearable />
          </el-form-item>

          <el-form-item label="角色代码" prop="code">
            <el-input v-model="form.code" placeholder="请输入角色代码" clearable />
          </el-form-item>

          <!-- 自动转换depId 为depName -->
          <el-form-item label="所属组织" prop="depId">
            <!-- <el-input v-model="form.depId" placeholder="请输入组织id" clearable /> -->
            <dep-tree v-model="form.depId" :dep-input-change="depSearchInput" :load-on-mounted="true" />
          </el-form-item>

          <!-- 状态  1 启用  0 禁用 -->
          <!-- 状态值 -->
          <el-form-item label="状态" prop="status">
            <!-- 代码生成器生成的 默认从通用字典 common_status 里取值，其他情况，请手动修改-->
            <el-radio-group v-for="s in dict.common_status" :key="s.key" v-model="form.status">
              <el-radio :label="Number(s.key)">{{ s.value }}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item
            label="排序"
            prop="paixu"
          >
            <el-input-number
              v-model.number="form.paixu"
              :min="0"
              :max="999"
              controls-position="right"
            />
          </el-form-item>

          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" placeholder="请输入备注" clearable />
          </el-form-item>

          <!-- 角色类型 0：普通角色 ；16：系统内置角色不可删除 -->
          <el-form-item label="角色类型" prop="type">
            <!-- 智能推断为字典类型, 字典类型为 dict.sys_role_type -->
            <el-select v-model="form.type" clearable placeholder="请选择角色类型 0：普通角色 ；16：系统内置角色不可删除" style="width: 100%">
              <el-option
                v-for="type in dict.sys_role_type"
                :key="type.key"
                :label="type.value"
                :value="Number(type.key)"
              />
            </el-select>
          </el-form-item>

          <!-- 使用范围 0：所有组织可用， 1：当前组织以及下级组织可用，2：仅限当前组织可用 -->
          <el-form-item label="使用范围" prop="useRange">
            <!-- 智能推断为字典类型, 字典类型为 dict.sys_role_use_range -->
            <el-select v-model="form.useRange" clearable placeholder="请选择使用范围 0：所有组织可用， 1：当前组织以及下级组织可用，2：仅限当前组织可用" style="width: 100%">
              <el-option
                v-for="useRange in dict.sys_role_use_range"
                :key="useRange.key"
                :label="useRange.value"
                :value="Number(useRange.key)"
              />
            </el-select>
          </el-form-item>

        </el-form>

        <div class="leisure-drawer__footer">
          <el-button
            @click="crud.cancelCU"
          >
            取消
          </el-button>
          <el-button
            :loading="crud.status.cu === 2"
            type="primary"
            @click="crud.submitCU"
          >
            确认
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { form } from '@crud/crud'
import DepTree from '@/views/components/depTree'
// 用户角色 - model
const defaultForm = {
  id: null, // id
  name: null, // 角色名称
  code: null, // 角色代码
  depId: null, // 组织id
  status: 1,
  paixu: 1,
  remark: null, // 备注
  type: null, // 角色类型 0：普通角色 ；16：系统内置角色不可删除
  useRange: null, // 使用范围 0：所有组织可用， 1：当前组织以及下级组织可用，2：仅限当前组织可用
  lockVersion: 0,
  createUser: null
}
export default {
  components: {
    DepTree
  },
  mixins: [form(defaultForm)],
  dicts: [
    'sys_role_type',
    'sys_role_use_range',
    'common_status'
  ],
  // 为了避免和其他form冲突，加个字段区分
  props: {
    showBinding: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      rules: {
        status: [
          { required: true, message: '请选择状态', trigger: 'blur', type: 'number' }
        ],
        type: [
          { required: true, message: '请选择角色类型', trigger: 'blur', type: 'number' }
        ],
        useRange: [
          { required: true, message: '请选择使用范围', trigger: 'blur', type: 'number' }
        ],
        depId: [
          { required: true, message: '请选择所属组织', trigger: 'change' }
        ],
        paixu: [
          { required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
        ]
      }
    }
  },
  methods: {
    depSearchInput(value) {
      this.form.depId = value
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }

</style>
